<template>
  <div class="login-container">
    <div class="login-weaper animated bounceInDown">
      <div class="login-left">
        <div class="login-time">{{time}}</div>
        <img class="img" src="../../assets/logo/logo.png" alt="">
        <p class="title">{{defaultSettings.title}}</p>
      </div>
      <div class="login-border">
        <div class="login-main">
          <h4 class="login-title">登录 {{defaultSettings.title}}</h4>
          <userLogin v-if="activeName==='user'"></userLogin>
          <codeLogin v-else-if="activeName==='code'"></codeLogin>
          <!-- <div class="login-menu">
            <a href="#" @click.stop="activeName='user'">密码登录</a>
            <a href="#" @click.stop="activeName='code'">手机登录</a>
          </div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import userLogin from './userlogin'
import codeLogin from './codelogin'
import '@/assets/styles/login.scss'
import '@/assets/styles/transition.scss'
import defaultSettings from '@/settings'
export default {
  name: 'login',
  components: { userLogin, codeLogin },
  data() {
    return {
      time: '',
      activeName: 'user',
      defaultSettings:defaultSettings
    }
  },
  created() {
    this.getTime()
    setInterval(() => {
      this.getTime()
    }, 1000)
  },
  methods: {
    dateFormat(date) {
      let format = 'yyyy-MM-dd hh:mm:ss'
      if (date !== 'Invalid Date') {
        var o = {
          'M+': date.getMonth() + 1, // month
          'd+': date.getDate(), // day
          'h+': date.getHours(), // hour
          'm+': date.getMinutes(), // minute
          's+': date.getSeconds(), // second
          'q+': Math.floor((date.getMonth() + 3) / 3), // quarter
          'S': date.getMilliseconds() // millisecond
        }
        if (/(y+)/.test(format)) {
          format = format.replace(RegExp.$1,
            (date.getFullYear() + '').substr(4 - RegExp.$1.length))
        }
        for (var k in o) {
          if (new RegExp('(' + k + ')').test(format)) {
            format = format.replace(RegExp.$1,
              RegExp.$1.length === 1 ? o[k]
                : ('00' + o[k]).substr(('' + o[k]).length))
          }
        }
        return format
      }
      return ''
    },
    getTime() {
      this.time = this.dateFormat(new Date())
    }
  }
}
</script>